<template>
  <view>
    <z-paging ref="paging" style="padding-bottom: 60px" v-model="dataList" :safe-area-inset-bottom="true" :auto-show-back-to-top="true" :use-page-scroll="false" @query="queryList">
      <view class="item" v-for="(item, index) in dataList" :key="index">
        <view class="heise"></view>
        <view class="cu-bar bg-white solid-bottom flex justify-between">
          <view class="">
            <view class="text-sm margin-sm">时间：{{ item.datetime }}</view>
          </view>
        </view>
        <view class="grid col-4 padding-sm dishe">
          <view class="text-center">
            <view class="margin-sm text-gray">总提笔数</view>
            <view>{{ item.id }}张</view>
          </view>
          <view class="text-center">
            <view class="margin-sm text-gray">总提金额</view>
            <view class="text-price text-orange">{{ item.summoney }}</view>
          </view>
          <view class="text-center">
            <view class="margin-sm text-gray">成功笔数</view>
            <view class="text-green">{{ item.okcount }}张</view>
          </view>
          <view class="text-center">
            <view class="margin-sm text-gray">成功面额</view>
            <view class="text-green text-price">{{ item.okmian }}</view>
          </view>

          <view class="text-center">
            <view class="margin-sm text-gray">成功入账</view>
            <view class="text-green text-price">{{ parseFloat(item.okmoney).toFixed(2) }}</view>
          </view>
          <view class="text-center">
            <view class="margin-sm text-gray">失败笔数</view>
            <view class="text-red">{{ item.failcount }}张</view>
          </view>
          <view class="text-center">
            <view class="margin-sm text-gray">失败面额</view>
            <view class="text-red">{{ item.failmian }}</view>
          </view>
          <view class="text-center">
            <view class="margin-sm text-gray">待处理</view>
            <view class="text-brown">{{ item.loadcount }}</view>
          </view>
        </view>
      </view>
      <v-footer :bgColor="bgC" tab="my" class="buttonmenu" slot="bottom"></v-footer>
    </z-paging>
    <v-popup @update:isShow="isShow = $event" :isShow="isShow"></v-popup>
    <!-- #ifdef MP-WEIXIN -->
    <v-kefu @tap="tokefu()"></v-kefu>
    <!-- #endif -->
    <!-- #ifndef MP-WEIXIN -->
    <view @click="tokefu()" class="">
      <v-kefu></v-kefu>
    </view>
    <!-- #endif -->
  </view>
</template>
<script>
import footer from '@/components/footer.vue';
import kefu from '@/components/kefu.vue';
import popup from '@/components/popup.vue';
export default {
  components: { 'v-footer': footer, 'v-kefu': kefu, 'v-popup': popup },
  data() {
    return {
      isShow: 0, //控制客服弹出层
      dataList: [],
      bgC: false,
      currentTheme: '' //背景色
    };
  },
  onShow() {
    this.currentTheme = this.getTheme();
    var that = this;
    this.bgC = that.app.background;
  },
  // 计算属性返回css样式
  computed: {
    themeClass() {
      return `theme-${this.currentTheme}`;
    }
  },
  methods: {
    // 获取本地样式
    getTheme() {
      return uni.getStorageSync('theme') || 'dark';
    },
    tokefu() {
      this.isShow = !this.isShow;
    },
    queryList(pageNo, pageSize) {
      const params = {
        pageNo: pageNo,
        pageSize: pageSize
      };
      var that = this;
      uni.request({
        method: 'post',
        url: that.app.apiHost + '/statistics',
        header: { Authorization: 'bearer ' + that.app.getAuthCode() },
        data: params,
        success: (data) => {
          if (data.data.code == -1) {
            that.app.showMsg('请登陆后再操作!', '../login/login');
          }
          let list = data.data.data.data;
          console.log(list);
          that.$refs.paging.complete(list);
        },
        fail(a) {
          that.$refs.paging.complete(false);
        }
      });
    }
  }
};
</script>

<style>
/* 定义主题样式 */
.theme-dark {
  background-color: #272735 !important;
  font-size: 26rpx;
  color: #fcecc9 !important;
}

.theme-light {
  background-color: #fff !important;
  font-size: 26rpx;
  color: #000 !important;
}
.heise {
  background-color: #e1e1e1;
  height: 15rpx;
}
</style>
